import React, { Component } from 'react'
import styles from "../assets/styles/pageing.module.css"

export default class Pageing extends Component {
    // 生命周期函数，相当于mounted
    componentDidMount() {
        console.log(this); //{currentPage:1,pageSize:3}
    }
    get totalPage() {
        const { pageSize, total } = this.props
        return Math.ceil(total / pageSize)
    }
    get createSpan(){
        let temp = []
        for (let index = 0; index < this.totalPage; index++) {
            temp.push(<span key={index}>{index+1}</span>)
        }
        return temp
    }
    checkSpanEvent = (event)=>{
        const value = event.target.innerText;
        this.props.changeParentPage(value)
    }
    pageSizeChange = (event)=>{
        const value = event.target.value
        this.props.changeParentPageSize(value)
    }
    render() {
        const { currentPage} = this.props
        return (
            <>
                <div className={styles.fenye}>
                    <span>当前{currentPage}页/共{this.totalPage}页</span>
                    <select name="" id="" onChange={this.pageSizeChange}>
                        <option value="3">每页3条</option>
                        <option value="6">每页6条</option>
                        <option value="9">每页9条</option>
                    </select>
                    <input type="text" placeholder='跳转指定页码' />
                    <div className={styles.page} onClick={this.checkSpanEvent}>
                        {/* <span>1</span>
                        <span onClick={() => this.changeCurrentPage(2)}>2</span>
                        <span>3</span> */}
                        {this.createSpan}
                    </div>
                </div>
            </>

        )
    }
}

